@charset "utf-8";
@charset "GBK";
@import "reset";
@import "common";

//
body{
    width: 100%;
}

section{
    width: 1366px;
    margin: 0 auto;
    background-color: white;
    padding-bottom: 40px;
    .cell>.warp{
        overflow: hidden;
    }
    .cell>.warp img:hover{
        transform: scale(1.2) rotateY(360deg);
        transition: transform 1s;
    }

    .shoujiao{
        width: 100%;

        .shoujiaoleft{
            width: 132px;
            height: 420px;
            float: left;
            position: relative;
            img{
                width: 132px;
                height: 420px;
            }

            .warp{
                width: 132px;
                height: 420px;
                position: absolute;
                top: 0;
                left: 0;
                background: black;
                opacity: 0.6;
                transition: opacity 0.3s;
            }

            .left{
                left: 56px;
                top: 184px;
                position: absolute;
                img{
                    width: 16px;
                    height: 30px;
                }
              
            }

            &:hover .warp{
                transition: opacity 0.3s;
                opacity: 0.3;
            }

            &:hover~.shoujiaomain .shoujiaomain-warp{
                transition: left 1s;
                left: 100%;
            }
            
        }

        .shoujiaomain{
            width: 1099px;
            height: 420px;
            overflow: hidden;
            position: relative;
            .shoujiaomain-warp{
                position: absolute;
                overflow: hidden;
                top: 0;
                left: 0;
                

                .bg{
                    width: 1099px;
                    height: 420px;
                }

                .triangle{
                    width: 319px;
                    height: 283px;
                    position: absolute;
                    top: 197px; 
                    left: 382px;
                    animation: bottomside 1s ease;
                    
                }

                .rectangle{
                    width: 701px;
                    height: 228px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: white;
                    animation: topside 1s ease;
                }

                .clothes{
                    position: absolute;
                    width: 364px;
                    height: 418px;
                    top: 30px;
                    left: 146px;
                    animation: leftside 0.5s ease;
                }
                
                
                

                @keyframes topside{
                    from{top: -100%;}
                    to{top: 0;}
                }

                @keyframes bottomside{
                    from{top: 420px;}
                    to{top: 197px;}
                }

                @keyframes leftside{
                    from{left: -100%;}
                    to{left: 146px;}
                }
                
            }
        }
        

        .shoujiaoright{
            width: 134px;
            height: 420px;
            float: left;
            position: relative;
            img{
                width: 134px;
                height: 420px;
            }

            .warp{
                width: 134px;
                height: 420px;
                position: absolute;
                top: 0;
                left: 0;
                background: black;
                opacity: 0.6;
                transition: opacity 0.3s;
            }

            .right{
                left: 77px;
                top: 184px;
                position: absolute;
                img{
                    width: 16px;
                    height: 30px;
                }
              
            }

            &:hover .warp{
                transition: opacity 0.3s;
                opacity: 0.3;
            }

//          &:hover .shoujiaomain .shoujiaomain-warp{
//              transition: left 1s;
//              left: 100%;
//          }
            
        }

        .shoujiaobottom{
            width: 1100px;
            height: 82px;
            margin: 5px auto 0 auto;
            .main{
                margin-right: 5px;
                position: relative;
                img{
                    width: 216px;
                    height: 82px;
                    display: block;
                }
                

//              &::before{
//                  content: "";
//                  display: block;
//                  position: absolute;
//                  left: 0;
//                  top: 0;
//                  width: 100%;
//                  height: 100%;
//                  background-color: black;
//                  opacity: 0.7;
//              }
                
            }
            div:nth-last-of-type(2){
                margin-right: 0;
            }
             
            }
            

            .meng{
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: black;
                    opacity: 0.7;
                }
            }
            
        }

        .tuijian{
            width: 1260px;
            margin: 42px auto 0 auto;
            &>p{
                width: 66px;
                line-height: 16px;
                margin: 0 auto;
            }

            .tuijianbanner{
                width: 100%;
                margin-top: 38px;

                .tuijianleft{
                    cursor: pointer;
                    margin-top: 63px;
                    img{
                        width: 16px;
                        height: 30px;
                    }
                }

                .make{

                    .makecell{
                        height: 140px;
                        transition: all 0.5s;
                        &:hover{
                            @include boxshadow;
                            transition: all 0.5s;
                        }
//                      @include boxshadow;
                        img{
                            margin-left: 38px;
                            margin-right: 31px;

                        }
                        & .mcright>p{
                            height: 14px;
                            line-height: 14px;
                            font-size: 14px;
                            margin-top: 30px;
                            color: #444f58;
                            
                        }

                     .selectmake{
                         margin-top: 22px;
                         width: 105px;
                         &>p:first-of-type{
                             width: 54px;
                             height: 19px;
                             
                             background-color: #eb413d;
                             font-size: 13px;
                             padding-top: 3px;
                             text-align: center;
                             a{
                                 text-decoration: none;
                                 color: white;
                                 
                             }
                         }
                         &>p:nth-of-type(2){
                             width: 51px;
                             height: 19px;
//                           color: white;
                             background-color: black;    
                             font-size: 13px;
                             padding-top: 3px;
                             text-align: center;
                             a{
                                 text-decoration: none;
                                 color: white;
                                 
                             }
                         }
                         &>p:nth-of-type(3){
                             margin-top: 9px;
                             height: 9px;
                             font-size: 9px;
                             color: #444f58;
                         }
                     }
                     
                    
                     
                     
                     
                    }
                    
                    
                    

                    .mc1{
                        margin-left: 46px;
                        padding-right: 14px;
                        width: 289px;
                        img{
                            width: 100px;
                            height: 114px;
                            margin-top: 10px;
                        }
                    }
                    
                    .mc2{
                        padding-right: 11px;
                        border-left: 1px solid #e5e5e5;
                        img{
                            width: 88px;
                            height: 118px;
                            margin-top: 7px;
                        }
                    }
                    
                    .mc3{
                        padding-right: 17px;
                        border-left: 1px solid #e5e5e5;
                        img{
                            width: 73px;
                            height: 129px;
                            margin-top: 1px;
                        }
                    }
                    
                    .mc4{
//                      margin-left: 17px;

                        border-left: 1px solid #e5e5e5;
                        padding-right: 13px;
                        img{
                            width: 94px;
                            height: 121px;
                            margin-top: 6px;
                        }
                    }
                    
                }

            
            .tuijianright{
                margin-top: 43px;
                margin-right: 0px;
                cursor: pointer;
                img{
                    width: 16px;
                    height: 30px;
                }
                
            }

                
                
                
            }
            
        }
        

        .ad{
            width: 1100px;
            margin: 40px auto 0 auto;
            img{
                width: 1100px;
                height: 168px;
            }
        }
        

        .makeride{
            width: 1100px;
//          height: 625px;
            margin: 39px auto 0 auto;

            .top{
                height: 16px;
                font-size: 0;
                &>p:first-of-type{
                    display: block;
                    margin-left: 515px;
                    font-size: 16px;
                    
                }
                &>p:nth-of-type(2){
                    
                        margin-top: 3px;
                        font-size: 10px;
                        line-height: 14px;
                    
                    
                }
            }
            

            .ridecontent{
                width: 1100px;
                
                margin-top: 40px;
//              
                .acc{
//      
                    width: 200px;
                    margin-top: 1px;
                    .img-warp{
                        position: relative;
//                      @include boxshadow;
                        
                        img{
                          width: 200px;
                          height: 116px;
                          display: block;
                        }
                        p{
                            position: absolute;
                            top: 49px;
                            left: 77px;
                            font-size: 18px;
                            line-height: 18px;
                            color: white;
//                          padding-bottom: 8px;
                            border-bottom: 2px solid white;
                            width: 44px;
                            text-align: justify;
                            &::after{
                                content: "";
                                display: inline-block;
                                width: 100%;
                                height: 0;
                            }
                            
                        }
                   
                    }

                        .acclist{
                            width: 100%;
                            background-color: $basecolor;
                            padding-top: 10px;
                            padding-bottom: 15px;
                            margin-top: 8px;
                            ul{
//                              margin-top: px;
                                li{
                                    line-height: 42px;
                                    font-size: 16px;
                                    text-align: center;
                                    transition: all 0.6s;
                                    &:hover{
                                        @include boxshadow;
                                        transition: all 0.6s;
                                    }
                                    
                                    a{
                                        color: #7f7f7f;
                                    }
                                }
                            }
                        }

                    
                    
                }
                

                    .sportlevel{
                        width: 268px;
                        margin-left: 8px;
                        overflow: hidden;
                        .puji{
                            width: 100%;
                            position: relative;
                            overflow: hidden;
                            @include scaleimg;
                            img{
                                width: 268px;
                                height: 281px;
                                transform: scale(1);
                                transition: transform 0.5s;
                                display: block;
                            }
                            .red{
                                position: absolute;
                                width: 100%;
                                height: 65px;
                                opacity: 0.9;
                                font-size: 0;
                                top: 215px;
                                left: 0;
                                background-color: red;
                                p{
                                    color: white;
                                    position: absolute;
                                }
                                p:first-of-type{
                                    top: 17px;
                                    left: 23px;
                                    font-size: 19px;
                                    letter-spacing: 2px;
                                    display: inline-block;
                                }
                                p:nth-of-type(2){
                                    right: 16px;
                                    bottom: 12px;
                                    font-size: 11px;
                                    
                                    display: inline-block;
                                    a{
                                        color: white;
                                    }
                                }
                            }
                        }
                        

                        .pro{
                            width: 100%;
                            position: relative;
                            overflow: hidden;
                            margin-top: 7px;
//                          transform: scale(1);
//                          transition: transform 0.5s;
//                          &:hover img{
//                              transform: scale(1.2);
//                              transition: transform 0.5s;
//                              }
                            @include scaleimg;
                            img{
                                width: 268px;
                                height: 281px;
                                transform: scale(1);
                                transition: transform 0.5s;
                                display: block;
                            }
                            .red{
                                position: absolute;
                                width: 100%;
                                height: 65px;
                                opacity: 0.9;
                                font-size: 0;
                                top: 215px;
                                left: 0;
                                background-color: red;
                                p{
                                    color: white;
                                    position: absolute;
                                }
                                p:first-of-type{
                                    top: 17px;
                                    left: 23px;
                                    font-size: 19px;
                                    letter-spacing: 2px;
                                    display: inline-block;
                                }
                                p:nth-of-type(2){
                                    right: 16px;
                                    bottom: 12px;
                                    font-size: 11px;
                                    
                                    display: inline-block;
                                    a{
                                        color: white;
                                    }
                                }
                            }
                        }
                        
                    }

                    .rideclothes{
                        width: 618px;
                        margin-top: 1px;
                        margin-left: 6px;
//                      height: 568px;
//                      .cell:hover{
//                          @include boxshadow;
//                          .rc-bottom{
//                              &>p{
//                                  text-align: center;
//                              }
//                          }
//                      }
                        
                        .rc-cell{
                            width: 200px;
                            transition:all 1s;
                            margin-right: 9px;
                            margin-top: 8px;
                            &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){
                                margin-top: 0;
                            }
                            &:nth-of-type(3n){
                                margin-right: 0;
                            }
                            &:hover{
                                @include boxshadow;
                            }
                            
                            .rc-warp{
                            border: 1px solid $basecolor;
                            width: 198px;
                            img{
                            width: 198px;
                            height: 198px;
                            display: block;
                            }
                        }
                            
                            .rc-bottom{
                                background-color: $basecolor;
                                width: 175px;
                                height: 58px;
                                padding-top: 12px;
                                padding-left: 14px;
                                padding-right: 11px;
                                padding-bottom: 10px;
                                font-size: 0;
                                
                                p:first-of-type{
                                    
                                        font-size: 14px;
                                        width: 84px;
                                        text-align: left;
                                    
                                    
                                    height: 14px;
                                    
                                    
                                    color: $fontcolor;
                                    transition: all 1s;
                                    
                                }
                                p:nth-of-type(2){
                                    
                                    height: 10px;
//                                  text-align: left;
                                    color: $fontcolor;
                                    margin-top: 10px;
                                    transition: all 1s;
                                    
                                        font-size: 10px;
                                        width: 32px;
                                        text-align: left;
                                    
                                }
                                div{
                                    height: 20px;
                                    margin-top: 4px;
                                    text-align: right;
                                    font-size: 0;
                                    transition: all 1s;
                                    .like{
                                        height: 20px;
                                        width: 83px;
                                        display: inline-block;
                                        text-align: center;
                                        a{
                                            color: white;
                                            img{
                                            width: 11px;
                                            height: 11px;
                                            vertical-align: -2px;
                                            margin-left: 7px;
                                            margin-top: 4px;
                                            }
                                        }
                                        
                                        font-size:11px;
                                        line-height: 20px;
                                        color: white;
                                        background-color: black;
                                        border-radius: 10px;
                                        }
                                    
                                }
                                
                                
                                
                            }
                            
                            }
//                          .cell:hover .bottom .word p{
//                              margin: auto;
//                              transition: all 1s;
//                              
//                          }
//                          .cell:hover .bottom>div{
//                              text-align: center;
//                              transition: all 1s;
//                              @include boxshadow;
//                          }
                            
                        }
                        
                        
                        
                        
                    }
                    
                
            }
            

            .run{
                width: 1100px;
//              height: 569px;
                
                margin: 44px auto 0 auto; 
//              顶部文字
                .top{
                height: 16px;
                font-size: 0;
                &>p:first-of-type{
                    display: block;
                    margin-left: 515px;
                    font-size: 16px;
                    
                }
                &>p:nth-of-type(2){
                    
                        margin-top: 3px;
                        font-size: 10px;
                        line-height: 14px;
                    
                    
                } 
            }
            

                .content{
                    width: 100%;
//                  height: 517px;
                    
                    margin-top: 37px;

                    .runad{
                        .img-warp{
                            border: 1px solid $basecolor;
                            
                            img{
                                width: 545px;
                                height: 214px;
                                display: block
                            }
                        }
                    }

                    .runbottom{
                        width: 1098px;
//                      height: 295px;
//                      background-color: black;
                        margin: 6px 1px 0 1px;

                        .list{
                            width: 199px;
                            background-color: $basecolor;
                            padding-top: 6px;
                            padding-bottom: 15px;
                            
                            ul{
//                              margin-top: px;
                                li{
                                    line-height: 45px;
                                    font-size: 16px;
                                    text-align: center;
                                    transition: all 0.6s;
                                    &:hover{
                                        @include boxshadow;
                                        transition: all 0.6s;
                                    }
                                    
                                    a{
                                        color: #7f7f7f;
                                    }
                                }
                            }
                        }
                        

                        .runbtmr{
                            width: 891px;
//                          height: 295px;
//                          margin-left: 9px;
//                          background-color: black;
                            .runbtmcell{
                            width: 215px;
                            transition:all 1s;
                            margin-right: 10px;
//                          margin-top: 8px;
                            
                            &:last-of-type{
                                margin-right: 0;
                            }
                            &:hover{
                                @include boxshadow;
                            }
                            
                            .runbtmwarp{
                            border: 1px solid $basecolor;
                            width: 213px;
                            img{
                            width: 213px;
                            height: 213px;
                            display: block;
                            }
                        }
                            
                            .run-bottom{
                                background-color: $basecolor;
                                width: 190px;
                                height: 58px;
                                padding-top: 12px;
                                padding-left: 14px;
                                padding-right: 11px;
                                padding-bottom: 10px;
                                font-size: 0;
                                
                                p:first-of-type{
                                    
                                        font-size: 14px;
                                        width: 84px;
                                        text-align: left;
                                    
                                    
                                    height: 14px;
                                    
                                    
                                    color: $fontcolor;
                                    transition: all 1s;
                                    
                                }
                                p:nth-of-type(2){
                                    
                                    height: 10px;
//                                  text-align: left;
                                    color: $fontcolor;
                                    margin-top: 10px;
                                    transition: all 1s;
                                    
                                        font-size: 10px;
                                        width: 32px;
                                        text-align: left;
                                    
                                }
                                div{
                                    height: 20px;
                                    margin-top: 4px;
                                    text-align: right;
                                    font-size: 0;
                                    transition: all 1s;
                                    .like{
                                        height: 20px;
                                        width: 83px;
                                        display: inline-block;
                                        text-align: center;
                                        a{
                                            color: white;
                                            img{
                                            width: 11px;
                                            height: 11px;
                                            vertical-align: -2px;
                                            margin-left: 7px;
                                            margin-top: 4px;
                                            }
                                        }
                                        
                                        font-size:11px;
                                        line-height: 20px;
                                        color: white;
                                        background-color: black;
                                        border-radius: 10px;
                                        }
                                    
                                }
                                
                                
                                
                            }
                            
                            }
                        }
                        
                        
                    }
                    
                    
                    
                }
            
                
            }

            .tiesan{
                width: 1099px;
//              height: 570px;
//              background-color: black;
                margin: 43px auto 0 auto;
//              顶部文字
                .top{
                height: 16px;
                font-size: 0;
                &>p:first-of-type{
                    display: block;
                    margin-left: 515px;
                    font-size: 16px;
                    
                }
                &>p:nth-of-type(2){
                    
                        margin-top: 3px;
                        font-size: 10px;
                        line-height: 14px;
                    
                    
                } 
            }
            

            .content{
                width: 100%;
//                  height: 517px;
                    
                    margin-top: 37px;

                    .runad{
                        .img-warp{
                            border: 1px solid $basecolor;
                            
                            img{
                                width: 544px;
                                height: 214px;
                                display: block
                            }
                        }
                    }


                    .tiesanbottom{
                        width: 100%;
//                      height: 295px;
                        margin-top: 7px;
//                      background-color: black;

                        .tiesanbtml{

                            .img-w{
                                position: relative;
//                              @include boxshadow;
                        
                             img{
                                 width: 199px;
                                  height: 133px;
                               display: block;
                              }
                                p{
                                    position: absolute;
                                    top: 63px;
                                    left: 75px;
                                    font-size: 18px;
                                    line-height: 18px;
                                    color: white;
        //                          padding-bottom: 8px;
                                    border-bottom: 2px solid white;
                                    width: 44px;
                                    text-align: justify;
                                    &::after{
                                        content: "";
                                        display: inline-block;
                                        width: 100%;
                                        height: 0;
                                    }
                            
                                }
                   
                                }
                                

                            .tiesanlist{
                                width: 199px;
                                background-color: $basecolor;
                                padding-top: 14px;
                                padding-bottom: 15px;
                                margin-top: 7px;
                                
                                ul{
    //                              margin-top: px;
                                    li{
                                        line-height: 45px;
                                        font-size: 16px;
                                        text-align: center;
                                        transition: all 0.6s;
                                        &:hover{
                                            @include boxshadow;
                                            transition: all 0.6s;
                                        }
                                        
                                        a{
                                            color: #7f7f7f;
                                        }
                                    }
                                }
                                
                            }

                            
                        }

                            .tiesanbtmr{
                                width: 890px;
                                
                                .tiesanbtmcell{
                                    width: 215px;
                                    transition:all 1s;
                                    margin-right: 10px;
        //                          margin-top: 8px;
                                    
                                    &:last-of-type{
                                        margin-right: 0;
                                    }
                                    &:hover{
                                        @include boxshadow;
                                    }
                                    
                                    .tiesanbtmwarp{
                                    border: 1px solid $basecolor;
                                    width: 213px;
                                    img{
                                    width: 213px;
                                    height: 213px;
                                    display: block;
                                    }
                                }
                            
                            .tiesan-bottom{
                                background-color: $basecolor;
                                width: 190px;
                                height: 58px;
                                padding-top: 12px;
                                padding-left: 14px;
                                padding-right: 11px;
                                padding-bottom: 10px;
                                font-size: 0;
                                
                                p:first-of-type{
                                    
                                        font-size: 14px;
                                        width: 84px;
                                        text-align: left;
                                    
                                    
                                    height: 14px;
                                    
                                    
                                    color: $fontcolor;
                                    transition: all 1s;
                                    
                                }
                                p:nth-of-type(2){
                                    
                                    height: 10px;
//                                  text-align: left;
                                    color: $fontcolor;
                                    margin-top: 10px;
                                    transition: all 1s;
                                    
                                        font-size: 10px;
                                        width: 32px;
                                        text-align: left;
                                    
                                }
                                div{
                                    height: 20px;
                                    margin-top: 4px;
                                    text-align: right;
                                    font-size: 0;
                                    transition: all 1s;
                                    .like{
                                        height: 20px;
                                        width: 83px;
                                        display: inline-block;
                                        text-align: center;
                                        a{
                                            color: white;
                                            img{
                                            width: 11px;
                                            height: 11px;
                                            vertical-align: -2px;
                                            margin-left: 7px;
                                            margin-top: 4px;
                                            }
                                        }
                                        
                                        font-size:11px;
                                        line-height: 20px;
                                        color: white;
                                        background-color: black;
                                        border-radius: 10px;
                                        }
                                    
                                }
                                
                                
                                
                            }
                            
                            }
                            }
                        
                    }
                    
                    
                    
            }
            
            
            
            
            }
        .relax{
            width: 1100px;
//          height: 356px;
            margin: 41px auto 0 auto;
//          background-color: black;
            .title{
                height: 15px;
                line-height: 15px;
                font-size: 15px;
                text-align: center;
            }

            .content{
                width: 100%;
//              height: 300px;
                margin-top: 41px;
//              background-color: black;
                overflow: hidden;
                .contentcell{
                            width: 272px;
                            height: 300px;
                            position: relative;
                            overflow: hidden;
                            margin-right: 3.55px;
                            &:nth-of-type(4){
                                margin-right: 0;
                            }
                            
                            @include scaleimg;
                            img{
                                width: 270px;
                                height: 298px;
                                border: 1px solid $basecolor;
                                transform: scale(1);
                                transition: transform 0.5s;
                                display: block;
                            }
                            .red{
                                position: absolute;
                                width: 100%;
                                height: 80px;
                                opacity: 0.9;
                                font-size: 0;
                                top: 220px;
                                left: 0;
                                background-color: red;
                                p{
                                    color: white;
                                    position: absolute;
                                }
                                p:first-of-type{
                                    top: 23px;
                                    left: 26px;
                                    font-size: 20px;
                                    letter-spacing: 1px;
                                    display: inline-block;
                                }
                                p:nth-of-type(2){
                                    right: 13px;
                                    bottom: 16px;
                                    font-size: 11px;
                                    
                                    display: inline-block;
                                    a{
                                        color: white;
                                    }
                                }
                            }
                        }
                
            }
        }
        
    .brand{
        width: 1098px;
//      height: 227px;
        margin: 46px auto 0 auto;
//      background-color: black;
        .title{
            width: 100%;
            height: 15px;
            font-size: 15px;
            text-align: center;
            color: $fontcolor;
        }

        .brandcontent{
            width: 100%;
//          height: 171px;
//          background-color: black;
            margin-top: 41px;
            .brandcell{
                margin-right: 8px;
                margin-top: 7px;
                &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4),&:nth-of-type(5),&:nth-of-type(6){margin-top: 0;}
                img{
                    width: 176px;
                    height: 83px;
                    display: block;
                } 
                &:nth-of-type(6n){
                    margin-right: 0;
                }
                p{
                    width: 176px;
                    height: 49px;
//                  vertical-align: middle;
                    padding-top: 34px;
                    text-align: center;
                    
                    a{
                        font-size: 12px;
                        
//                      display: block;
                    }
                }
            }
        }

    }
        
        
    
}
